<script>
import { commentPage, pageByAncestor } from "@/api/complaint"
export default {
  name: 'comment',
  props: {
    complaint: {
      type: Object,
      default: () => ({})
    },
    complaintId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      commentList: [],
      pageReq: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      commentReq: {
        ancestor: '',
        pageNum: 2,
        pageSize: 3,
        total: 0
      },
      subMoreStatus: [],
      moreStatus: true
    }
  },
  watch: {
    complaintId: {
      handler(val) {
        this.pageReq.complaintId = val
        this.commentList = []
        this.moreStatus = true
        this.subMoreStatus = []
        this.pageReq.pageNum = 1
        this.commentReq.pageNum = 2
        this.getCommentList()
      },
      immediate: true
    }
  },
  methods: {
    async getCommentList() {
      const req = { complaintId: this.complaintId, pageNum: this.pageReq.pageNum, pageSize: this.pageReq.pageSize }
      const res = await commentPage(req)
      res.records.forEach(async (item) => {
        if (!item.children || item.subCommentsTotal <= item.children.length) {
          this.subMoreStatus.push(false)
        } else {
          this.subMoreStatus.push(true)
        }
      })
      if (res.records.length < this.pageReq.pageSize) {
        this.moreStatus = false
        this.commentList = this.commentList.concat(res.records)
        this.pageReq.total = res.total
        return
      }
      if (!res || res.records.length == 0 || res.total <= this.commentList.length) {
        this.moreStatus = false
        this.pageReq.total = res.total
        return
      }
      this.commentList = this.commentList.concat(res.records)
      this.pageReq.pageNum++
      this.pageReq.total = res.total
    },
    async loadSubComment(item, index) {
      if (!this.subMoreStatus[index]) {
        return
      }
      const req = { ancestor: item.id, pageNum: this.commentReq.pageNum, pageSize: this.commentReq.pageSize }
      const res = await pageByAncestor(req)
      if (res.records.length < this.commentReq.pageSize) {
        this.subMoreStatus[index] = false
        if (res.records.length == 0) {
          return
        }
        this.commentList[index].children = this.commentList[index].children.concat(res.records)
        this.commentReq.total = res.total
        return
      }
      if (this.commentReq.pageNum >= res.pages) {
        this.subMoreStatus[index] = false
      }
      this.commentList[index].children = this.commentList[index].children.concat(res.records)
      this.commentReq.pageNum++
      this.commentReq.total = res.total
    }
  }
}
</script>
<template>
  <div>
    <div class="complaint-area">
      <user-info class="complaint-area-userinfo" :data="complaint">
      </user-info>
      <div class="complaint-area-text">
        <span>{{ complaint.content }}</span>
      </div>
      <!-- 一行展示3张图片 -->
      <div class="complaint-area-pic">
        <div class="complaint-area-pic-item" v-for="(item, index) in complaint.picArr" :key="index">
          <el-image :src="item" style="width: 100px;height: 100px;" />
        </div>
      </div>
    </div>
    <div class="comment-area">
      <div class="comment-area-top">
        <span>{{ '评论 ' + pageReq.total }}</span>
      </div>
      <div class="comment-area-content">
        <div class="comment-area-content-item" v-for="(item, index) in commentList" :key="index">
          <div class="userinfo-left">
            <el-avatar class="userinfo-avatar" :src="item.avatar"></el-avatar>
          </div>
          <div class="userinfo-right">
            <div style="display: flex;">
              <span style="color:#999;width: auto;">{{ item.nickname }}</span>
              <el-tag style="width: auto;flex: unset;margin-left: 10px;" size="small"
                v-show="complaint.userId === item.userId">作者</el-tag>
            </div>
            <span style="margin-bottom: 10px;">{{ item.content }}</span>
            <el-image v-show="item.pic" style="margin-bottom: 10px;width: 100px; height: 100px;"
              :src="item.pic"></el-image>
            <div class="userinfo-bottom">
              <span class="userinfo-timeAgo" style="width: 50%;color: #999;">{{ item.timeAgo }}</span>
            </div>
            <div class="children" v-show="item.children && item.children.length > 0">
              <div class="children-item" v-for="(sub, i) in item.children" :key="i">
                <div class="children-userinfo-left">
                  <el-avatar size="small" class="children-userinfo-avatar" :src="sub.avatar"></el-avatar>
                </div>
                <div class="children-userinfo-right">
                  <div class="children-userinfo-text">
                    <div style="font-size: 28rpx; color: #999;line-height: 40rpx;display: inline;">{{
                      sub.nickname }}</div>
                    <div class="children-userinfo-tags" v-show="complaint.userId === sub.userId">作者</div>
                    <div v-show="sub.pNickname && sub.pId !== 0 && sub.ancestor != 0"
                      style="display: inline;margin-left: 5px;">
                      <div style=" display: inline;font-size: 28rpx; line-height: 40rpx;">回复</div>
                      <div style="display: inline;font-size: 28rpx; color: #999;line-height: 40rpx;margin-left: 5px;">
                        {{ sub.pNickname }}</div>
                    </div>
                    <div style="font-size: 28rpx; line-height: 40rpx;display: inline;">{{ '：' + sub.content }}
                    </div>
                  </div>
                  <el-image v-show="sub.pic" style="margin-bottom: 5px;width: 100px;height: 100px;"
                    :src="sub.pic"></el-image>
                  <div class="children-userinfo-bottom">
                    <span class="children-userinfo-timeAgo">{{ sub.timeAgo }}</span>
                  </div>
                </div>
              </div>
              <div v-show="subMoreStatus[index]" @click="loadSubComment(item, index)">---加载更多---</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.complaint-area {
  padding: 10px 10px 5px 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;

  &-userinfo {
    margin-bottom: 5px;
  }

  &-text {
    margin-bottom: 5px;
  }

  &-pic {
    // 一行展示3张图片
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    width: 320px;

    &-item {
      width: 33.33%;
      margin-bottom: 5px;
    }
  }
}

.comment-area {
  padding: 5px 10px;
  background-color: #fff;

  &-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
  }

  &-content-item {
    display: flex;
    justify-content: left;
    flex-direction: row;
    margin-bottom: 10px;
  }

  .userinfo-right {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    width: calc(100% - 50px);

    .userinfo-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .userinfo-opt {
        display: flex;
        width: 40%;
        flex-direction: row;
        align-items: center;

        .userinfo-opt-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          flex: 1;

          .opt-item-text {
            justify-content: center !important;
          }
        }
      }
    }

    .children-item {
      display: flex;
      justify-content: left;
      flex-direction: row;
      margin-bottom: 10px;

      .children-userinfo-right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        flex: 1;
        width: calc(100% - 100rpx);

        .children-userinfo-text {
          margin-bottom: 5px;

          .children-userinfo-tags {
            margin-left: 5px;
            display: inline;
            font-size: 24rpx;
            padding: 0 5rpx;
            line-height: 60rpx;
            background-color: #ecf5ff;
            color: #3c9cff;
          }
        }

        .children-userinfo-bottom {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .children-userinfo-opt {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 45%;

            .children-userinfo-opt-item {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              flex: 1;

              .children-opt-item-text {
                justify-content: center !important;
              }
            }
          }
        }
      }
    }
  }
}
</style>